<template>
  <NuxtLayout>
    <h1>
      首页
    </h1>

    <SwitchLocalePathLink locale="en">English</SwitchLocalePathLink>
    <SwitchLocalePathLink locale="zh">Chinese</SwitchLocalePathLink>
    <NuxtLinkLocale to="/keyword">
      to keyword
    </NuxtLinkLocale>

    <p>{{ $t('hello') }}</p>

    <button @click="nextPage">下一页</button>
    {{ reqCtx }}
  </NuxtLayout>
</template>

<script lang="tsx" setup>
import { useNuxtApp, useRequestEvent } from 'nuxt/app'

const state = reactive({
  limit: 18,
  order_by: 'publish_date',
  page: 1,
});
const queryParams = computed(() => {
  return {
    limit: state.limit,
    order_by: state.order_by,
    start: (state.page - 1) * state.limit,
  }
});
// const getQueryParams = () => {
//   console.log('state', { ...state });
//   const rc = {
//     limit: state.limit,
//     order_by: state.order_by,
//     start: (state.page - 1) * state.limit,
//   }
//   return rc;
// }


const { data, status, error, refresh, clear } = await useFetch('https://api.petslib.cn/frontend/information/list', {
  query: queryParams,
});

const meta = computed(() => valueToObject(data.value?.data?.meta))
useHead({
  title: meta.value.title,
  meta: [{
    name: 'keywords',
    content: meta.value.keywords
  }, {
    name: 'description',
    content: meta.value.description
  }],
})
const nextPage = () => {
  state.page += 1;
  refresh();
}

const getSelectOption = async () => {
  const { data } = await $fetch('https://api.petslib.cn/frontend/information/list');
  console.log('data', data);
}
const device = useDevice()


const _app = useNuxtApp()

let reqCtx = useState('reqCtx');
onServerPrefetch(async () => {
  const event = useRequestEvent();
  reqCtx.value = event.context.auth;
  // console.log('reqCtx', reqCtx);
});
// console.log('reqCtx', reqCtx);
onMounted(() => {
  console.log('data', data.value.data.list);
  getSelectOption();
  console.log('device', device);
  console.log('$auth', _app);
  console.log('reqCtx', reqCtx.value);
});
</script>